<template>

 <div>
   <div >
     <el-breadcrumb separator="/">
       <!--     <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
       <!--     <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>-->
       <el-breadcrumb-item>系统管理</el-breadcrumb-item>
       <el-breadcrumb-item>实时位置</el-breadcrumb-item>
     </el-breadcrumb>
   </div>
   <div>
     <el-form :inline="true" :model="forObject"  style="margin-top: 15px" class="demo-form-inline">
       <el-form-item label="姓名" style="float: left">
         <el-input v-model="forObject.username" placeholder="姓名"></el-input>
       </el-form-item>
       <el-form-item label="时间" style="float: left">
         <el-date-picker
           v-model="times"
           type="daterange"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>
       <el-form-item >
         <el-button type="primary"  @click="_onSearch">查询</el-button>
       </el-form-item>
     </el-form>

   </div>

     <div id="map" style="width:1250px;height:600px;"></div>
 </div>

</template>

<script>
    export default {

      mounted(){
        this._list();
      },
      components:{
      },
        name: "Home",
        data(){
          return {
            forObject:{
              username:undefined,
              sendDateBegin:undefined,
              sendDateEnd:undefined,
            },
            times:[],
            currentPage:1, //初始页
            pageSize:10,    //    每页的数据
            total:0,    //    每页的数据
            getPage:[],
            columnName:[
              {prop:"ip",label:"IP",width:"120",fixed:true},
              {prop:"address",label:"地址",width:"120"},
              {prop:"username",label:"登录人",width:"120"},
              {prop:"ctime",label:"登录时间",width:"120",date:true},

            ],
          }
        },
      methods:{
        handleClick(data){
          console.log(data);
        },

        handleSizeChange(val) {
        this.pageSize=val;
        },
        handleCurrentChange(val) {
         this.currentPage=val;
        },


        _list(){
          this.$http.post('/location_user/list',this.forObject).then(res=>{
              let listPosition = res.data.data;
              console.log('---------------',listPosition)
            this._mapInit(listPosition);
          }).catch(err=>{
            console.log(err)
          });
        },

        _mapInit(data){

          // 百度地图API功能
          var map = new BMap.Map("map");
          map.centerAndZoom('山东', 5);
          map.enableScrollWheelZoom();
          //获取JSON数组
          let opts = {
            width : 250,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title : "位置信息" , // 信息窗口标题
            enableMessage:true//设置允许信息窗发送短息
          };
          console.log('--data-',data)
          let myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(22, 24), {

            offset: new BMap.Size(10, 25),

            imageOffset: new BMap.Size(0, 0 - 12 * 25)

          });
          for (var i = 0; i<data.length;i++) {
            var location = data [i];
            var objs = location.usersList;
            var userName = location.username;

            console.log('--objs-',objs)

            var pois = [];
            for (var j=0;j<objs.length;j++){
              var obj= objs[j];
              pois[j]=new BMap.Point(obj.longitude,obj.latitude);
              let marker = new BMap.Marker(new BMap.Point(obj.longitude, obj.latitude),{icon: myIcon});  // 创建标注
              let content = "人员：" + userName + ' </br> '+"时间：" + this.$dateformat(obj.sendDate,'yyyy-mm-dd HH:MM:ss');
              map.addOverlay(marker);               // 将标注添加到地图中
              addClickHandler(content, marker);
            }
            console.log('--pois-',pois)
            var polyline = new BMap.Polyline(pois, {strokeColor:"blue", strokeWeight:2, strokeOpacity:1});   //创建折线
            map.addOverlay(polyline);   //增加折线
          }
          function addClickHandler(content, marker) {
            marker.addEventListener("click", function (e) {
                openInfo(content, e)
              }
            );
          }
          function openInfo(content, e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口
          }
        },

        _onSearch(){
          if (this.times.length>0){
           this.forObject.sendDateBegin = this.times[0]
           this.forObject.sendDateEnd = this.times[1]
          }
          console.log('------------------------',this.forObject)
          this._list();
        },
        _edit(row){
          console.log(row);
          this.$refs.sysUserEditRef._open(row);
        },

        _add(){
          this.$refs.sysUserEditRef._open();
        },


      },
    }

</script>

<style scoped>

</style>
